$(document).ready(function($) {	
	// QWERTY Password
	// ********************
	$('.txtClass').eq(1).keyboard({
		openOn   : null,
		usePreview: false,
		stayOpen : false,
		layout   : 'qwerty',
		autoAccept: true
	});
	//$('.txtClass').eq(1).getkeyboard().reveal();
	/*$('#userKb').click(function(){	
	    $('#user-clear').hide();
	    $('#user-user').show();
        $('#user-user').focus();	
		$('.txtClass:first').getkeyboard().reveal();
	});*/
	
	$('#userKb').click(function(){		    
	    $('#password-clear').hide();
	    $('#password-password').show();
        $('#password-password').focus();	
		$('.txtClass').eq(1).getkeyboard().reveal();
	});
	// since IE adds an overlay behind the input to prevent clicking in other inputs (the keyboard may not automatically open on focus... silly IE bug)
	// We can remove the overlay (transparent) if desired using this code:
	$('.txtClass').eq(1).bind('visible.keyboard', function(e, keyboard, el){
	 $('.ui-keyboard-overlay').remove(); // remove overlay because clicking on it will close the keyboard... we set "openOn" to null to prevent closing.
	});
	

	// Console showing callback messages
	// ********************
	$('.ui-keyboard-input').bind('visible.keyboard hidden.keyboard beforeClose.keyboard accepted.keyboard canceled.keyboard', function(e, keyboard, el, status){
		var c = $('#console'),
			t = '<li><span class="keyboard">' + $(el).parent().find('h2').text() + '</span>';
			switch (e.type){
				case 'visible'  : t += ' keyboard is <span class="event">visible</span>'; break;
				case 'hidden'   : t += ' keyboard is now <span class="event">hidden</span>'; break;
				case 'accepted' : t += ' content "<span class="content">' + el.value + '</span>" was <span class="event">accepted</span>' + ($(el).is('[type=password]') ? ', yeah... not so secure :(' : ''); break;
				case 'canceled' : t += ' content was <span class="event ignored">ignored</span>'; break;
				case 'beforeClose' : t += ' keyboard is about to <span class="event">close</span>, contents were <span class="event ' + (status ? 'accepted">accepted' : 'ignored">ignored') + '</span>'; break;
			}
		t += '</li>';
		c.append(t);
		if (c.find('li').length > 3) { c.find('li').eq(0).remove(); }
	});

	// Show code
	// ********************
	$('h2 span').click(function(){
		var t = '<h2>' + $(this).parent().text() + ' Code</h2>' + $(this).closest('.block').find('.code').html();
		$('#showcode').html(t).show();
		$("#showcode .js").chili();
		$("#showcode .html").chili();
	});

	// add tooltips
	// ********************
	//$.jatt();

// ********************
// Extension demos
// ********************

	// Set up typing simulator extension on ALL keyboards
	$('.ui-keyboard-input').addTyping();

	// simulate typing into the keyboard (\t = tab, \b = backspace, \r or \n = enter)
	$('#inter-type').click(function(){
		$('#inter').getkeyboard().reveal().typeIn("\tHell'o\bo \r\tWorld", 500);
		return false;
	});
	$('#meta-type').click(function(){
		var meta = $('#meta').getkeyboard();
		meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });
		return false;
	});

	// Autocomplete demo
	var availableTags = [
		"ActionScript",
		"AppleScript",
		"Asp",
		"BASIC",
		"C",
		"C++",
		"Clojure",
		"COBOL",
		"ColdFusion",
		"Erlang",
		"Fortran",
		"Groovy",
		"Haskell",
		"Java",
		"JavaScript",
		"Lisp",
		"Perl",
		"PHP",
		"Python",
		"Ruby",
		"Scala",
		"Scheme"
	];
	$('.qwerty:eq(0)')
		.autocomplete({
			source: availableTags
		})
		.addAutocomplete();
});